<template>
    <div class="login-container">
        <div class="login-content">
            <h3>镭目信息化平台</h3>
            <el-form class="login-form" :model="loginForm" label-width="0px">
                <el-form-item>
                    <el-input size="large" v-model="loginForm.name" />
                </el-form-item>
                <el-form-item>
                    <el-input
                        show-password
                        type="password"
                        size="large"
                        v-model="loginForm.password"
                    />
                </el-form-item>
            </el-form>
            <el-button
                size="large"
                @click="handleLogin"
                class="login-btn"
                type="primary"
            >登录</el-button
            >
        </div>
    </div>
</template>

<script setup>
import { ref, unref } from "vue";
import { useStore } from "vuex";
import store from "@/store/index";
import router from "@/router";
defineOptions({
  name: "Login",
});
//const store = useStore();
console.log("store", store);
const loginForm = ref({
  name: "admin",
  password: "1q2w3E*",
});

async function handleLogin() {
  await store.dispatch("user/login", unref(loginForm));
  router.push("/");
}
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
  height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  .login-content {
    width: 450px;
    > h3 {
      font-size: 26px;
      color: #eee;
      margin: 0 auto 40px auto;
      text-align: center;
      font-weight: 700;
    }
    .login-btn {
      margin-top: 20px;
      width: 100%;
    }
  }
  .login-form {
    .el-input {
      --el-input-text-color: white;
      --el-border-color: rgba(255, 255, 255, 0.1) !important;
      --el-input-bg-color: rgba(0, 0, 0, 0.1) !important;
      --el-border-color-hover: rgba(255, 255, 255, 0.1) !important;
    }

    :deep(.el-input__inner) {
      &:-webkit-autofill {
        -webkit-text-fill-color: #ffffff !important;
       -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
        background-color: transparent;
        background-image: none;
        transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
      }
    }
  }
}
</style>
